<template>
  <div class="myDiv">
    <Header title="用户体检信息"></Header>
    <div class="chaxun">
      <div class="chaxunleft">
        <van-cell-group>
          <van-field v-model="select.username" placeholder="请输入姓名" label-width="100px" label="姓名" />
          <van-field v-model="select.phone" placeholder="请输入手机号" label-width="100px" label="手机" />
        </van-cell-group>
      </div>
      <div class="chaxunright">
        <van-button type="info" size="small" style="margin-top: 5px;" @click="selectPatientInfo">查询</van-button>
        <van-button type="info" size="small" style="margin-top: 5px;" @click="reset">重置</van-button>
      </div>
    </div>
    <el-table
      :data="vesssel"
      v-loading="loading"
      border
      style="width: 100%"
      height="458"
      size="mini"
      :stripe="true"
      :cell-style="{padding:'9px 0'}"
      @row-click="dialogTableVisible"
    >
      <el-table-column fixed prop="name" align="center" label="用户名"></el-table-column>
      <el-table-column prop="title" align="center" width="100" label="电话"></el-table-column>
      <el-table-column prop="orgname" align="center" show-overflow-tooltip label="体检医生"></el-table-column>
      <el-table-column prop="modificationTime" show-overflow-tooltip align="center" label="体检时间"></el-table-column>
    </el-table>
    <!-- 体检信息的弹框 -->
    <el-dialog
      title="体检信息"
      :show-close="false"
      :visible.sync="dialogFormVisible"
      width="80%"
      center
    >
      <el-form :model="form">
        <el-form-item label="姓名:" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off" readonly></el-input>
        </el-form-item>
        <el-form-item label="体检时间:" :label-width="formLabelWidth">
          <el-select v-model="form.list.outTradeNo">
            <el-option v-for="(obj,i) in form.list" :key="i" :label="obj[0]" :value="obj[1]"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateOrder">确 定</el-button>
      </div>
    </el-dialog>
    <Page :total="total" ref="page" @pagenum="pagenum"></Page>
  </div>
</template>

<script>
import Header from "@/components/header";
import Page from "@/components/pagination";

export default {
  components: { Header, Page },
  props: {},
  data() {
    return {
      // 查询数据
      select: {
        username: "",
        phone: ""
      },
      form: {
        name: "",
        list: {}
      },
      page: 1,
      rows: 10,
      total: 0,
      formLabelWidth: "75px",
      dialogFormVisible: false,
      tableData: [], //全部数据
      vesssel: [], //页面临时数据
      loading: true
    };
  },
  watch: {
    page: function() {
      if (this.page == 1) {
        this.vesssel = this.tableData.slice(0, this.rows);
      } else if (this.page == Math.ceil(this.tableData.length / 10)) {
        this.vesssel = this.tableData.slice((this.page - 1) * this.rows);
      } else {
        this.vesssel = this.tableData.slice(
          (this.page - 1) * this.rows,
          this.rows * this.page
        );
      }
    }
  },
  computed: {},
  methods: {
    pagenum(data) {
      this.page = data[0];
      this.rows = data[1];
    },
    dialogTableVisible(row) {
      this.dialogFormVisible = !this.dialogFormVisible;
      this.form.name = row.name;
      this.$http(this.api.selectOneAnalysis, {
        keyid: row.keyid,
        orgcode: this.$store.state.userinfo.id
      }).then(res => {
        if (res.status == 200) {
          if (res.data.result == "true") {
            this.form.list = res.data.pageData.data;
          }
        }
      });
    },
    // 用户体检数据
    testdata(obj) {
      this.$http(this.api.selectAllAnalysis, obj).then(res => {
        this.$refs.page.changecurrent(1);
        this.tableData = res.data.pageData.data;
        this.loading = false;
        this.vesssel = this.tableData.slice(0, this.rows);
        this.total = res.data.pageData.total;
      });
    },
    // 查询
    selectPatientInfo() {
      this.testdata({ name: this.select.username, title: this.select.phone });
    },
    // 重置
    reset() {
      this.select.phone = "";
      this.select.username = "";
      this.testdata({
        page: 1,
        rows: 20,
        sort: "modificationTime",
        order: "desc"
      });
    },
    updateOrder() {
      // 获取点击体检列表的下标
      this.$http(this.api.selectAnalysisByTraneNoAndKeyid, {
        outTradeNo: this.form.list.outTradeNo
      }).then(res => {
        if (res.status == 200) {
          if (res.data.result == "true") {
            this.$router.push({
              path: "/analysisdes",
              query: { obj: res.data.pageData.data }
            });
          }
        }
      });
    }
  },
  created() {
    this.testdata({
      page: 1,
      rows: 20,
      sort: "modificationTime",
      order: "desc"
    });
  },
  mounted() {}
};
</script>
<style scoped>
.chaxun {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 10px;
}
.chaxunleft {
  width: 80%;
}
.chaxunright {
  display: flex;
  flex-direction: column;
  align-content: space-between;
}
</style>